<template>
  <div class="message-main">
    <div class="player-pic">
      <img :src="item.avatar" alt="头像" />
      <div class="player-nickname">{{item.name}}</div>
    </div>
    <div class="player-message">
      <span > {{ item._lctext }}</span>
    </div>
  </div>
</template>

<script>
import { DEFAULT_AVATAR } from "../../const.js"
export default {
    name: 'ConversationMessage',
    components: {},
    props: {
        item: Object
    },
    route: {
        data({ to: { params: { postId } }}) {
            this.id = postId
        }
    },
    data: function(){
        return {
            avatarurl: DEFAULT_AVATAR,
        }
    },
    ready(){
      console.log(this.item)
    }
}
</script>

<style lang='sass'>
.message-main{
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  .player-pic{
    display: flex;
    width: 24px;
    height: 24px;
    .player-nickname{
      color: #555;
      margin-left: 5px;
    }
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%
    }
  }
  .player-message{
    margin-left: 24px;
    margin-top: 10px;
    span{
      background: #fff;
      padding: 5px;
      border-radius: 10px;
      &:before{
      }
    }
  }
}
</style>